<template>
  <div>
    <div class="top">
      <el-input v-model="tableDataName" placeholder="请输入文章标题" style="width: 240px"></el-input>
      <el-button type="primary" @click="doFilter()">搜索</el-button>
      <el-button @click="doReset()">重置</el-button>
      <div class="space">
        <el-table :data="tableDataEnd" border style="width: 100%">
          <el-table-column prop="id" sortable label="id" width="180" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="userName" sortable label="姓名" width="180" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="isadministrator" sortable label="身份等级" width="180" header-align="center"
            align="center">
          </el-table-column>
          <el-table-column prop="isActived" sortable label="是否启用" width="180" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="isDeleted" sortable label="是否删除" width="180" header-align="center" align="center">
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="space">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
        <el-dialog userName="用户信息" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="id" :label-width="formLabelWidth">
              <el-input v-model="form.id" disabled auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.userName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限" :label-width="formLabelWidth">
              <el-form-item>
                <el-radio v-model="form.isadministrator" label=true>管理员</el-radio>
                <el-radio v-model="form.isadministrator" label=false>普通用户</el-radio>
              </el-form-item>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth">
              <el-form-item>
                <el-radio v-model="form.isActived" label=true>启用</el-radio>
                <el-radio v-model="form.isActived" label=false>未启用</el-radio>
              </el-form-item>
            </el-form-item>
            <el-form-item label="是否删除" :label-width="formLabelWidth">
              <el-form-item>
                <el-radio v-model="form.isDeleted" label=true>已删除</el-radio>
                <el-radio v-model="form.isDeleted" label=false>未删除</el-radio>
              </el-form-item>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { GetList, Getbyid, UpdateArticle, DelArticle, ArticleAdd, ArticleGetPager } from '@/api/Blogslist.js';
import { GetlistUser, GetAppUserByid, UpdateUser, DelUser, AddUser } from '@/api/Blogslist.js'
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "80px",
      dialogVisible: false,
      dialogVisible1: false,
      form: {},
      tableDataBegin: [],
      tableDataName: "",
      tableDataEnd: [],
      currentPage: 1,
      pageSize: 4,
      totalItems: 10,
      filterTableDataEnd: [],
      flag: false,
    };
  },

  handleSelectionChange(val) {
    this.users.id = val;
    console.log("选中的数据集合为:", val);
  },
  created() { },
  mounted() {
    this.querry();
  },
  computed: {
    // 测试代码
    articleName() {
      let articleName = sessionStorage.getItem("ms_articleName");

      console.log(articleName);
      if (articleName !== "test") {
        alert("11");
      }
      return articleName ? articleName : this.name;
    },
  },
  methods: {
    querry() {
      GetlistUser().then((res) => {
        var istable = []
        res.data.data.forEach((item) => {
          istable.push(item)

        });
        console.log(res);
        istable.forEach((item) => {
          if (item.isActived === true) {
            item.isActived = "已启用"
          } else {
            item.isActived = "未启用"
            console.log(item);
          }
          if (item.isDeleted === true) {
            item.isDeleted = "已删除"
          } else {
            item.isDeleted = "未删除"
            console.log(item);
          }
          if (item.isadministrator === true) {
            item.isadministrator = "管理员"
          } else {
            item.isadministrator = "普通用户"
            console.log(item);
          }
        })
        this.tableDataBegin = istable;
        this.totalItems = istable.length;
        console.log(istable);
        console.log(this.tableDataBegin);
        this.totalItems = istable.length;
        if (this.totalItems > this.pageSize) {
          for (let index = 0; index < this.pageSize; index++) {
            this.tableDataEnd.push(istable[index]);
            console.log(this.tableDataEnd);
          }
        } else {
          this.tableDataEnd = istable;
        }
      });
    },

    add() {
      this.form = {
        id: "",
        userName: "",
        isadministrator: "",
        isActived: "",
        isDeleted: "",

      }
        ;
      this.dialogFormVisible = true;
    },
    update() {

      var that = this;
      if (that.form.isActived === "true") {
        that.form.isActived = true;
      } else {
        that.form.isActived = false;
      }
      if (that.form.isadministrator === "true") {
        that.form.isadministrator =true;
      } else {
        that.form.isadministrator =false;
      }
      if (that.form.isDeleted === "true") {
        that.form.isDeleted = true;
      } else {
        that.form.isDeleted = false;
      }
      console.log(that.form);
      UpdateUser(that.form.id, {
        userName: that.form.userName,
        isadministrator: that.form.isadministrator,
        isActived: that.form.isActived,
        isDeleted: that.form.isDeleted
      }).then(function (res) {
        console.log(res.data);
        window.location.reload();
        if (res.data.Code == 1000) {
          window.location.reload();
          const loading = that.$loading({
            lock: true,
            text: "修改成功",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          setTimeout(() => {
            loading.close();
          }, 1500);
        }
      }

      ).catch(function (err) {
        //请求失败
        console.log(err);
      })
      this.dialogFormVisible = false;
    },
    handleEdit(index) {
      this.form = this.tableDataEnd[index];
      console.log(this.form.isadministrator);
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisible = true;
    },
    handleDelete(id) {
      console.log(id);
      DelUser(id).then(
        this.$confirm("永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then((res) => {
            window.location.reload();
            if (res.code === 1000) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              if (res.code === 2000) {
                console.log("删除失败");
                this.$loading({
                  type: "error",
                  message: "删除失败!"
                })
              }
              window.location.reload();
            }
          })
      );
      // 设置类似于console类型的功能
    },
    load() {
      var loading = this.$loading({
        lock: true,
        text: "等待跳转",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 在注册界面停留两秒钟跳转登录界
      setTimeout(() => {
        loading.close();

        this.querry();
        // res.end()
      }, 3000);
    },
    deleteRow(id) {
      console.log(id);
      if (confirm("确定要删除吗") == true) {

        DelUser(id).then((res) => {
          window.location.reload();
          if (res.code === 1000) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
      }
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    },
    doReset() {
      this.tableDataEnd = [];
      this.tableDataName = "";
      this.filterTableDataEnd = [];
      this.tableDataBegin.forEach((value) => {
        if (value.userName) {
          if (value.userName.indexOf(this.userName) >= 0) {
            this.filterTableDataEnd.push(value);
            console.log(value);
          }
        }
      });

      this.tableDataName = "";
      this.currentPage = 1;
      this.totalItems = this.filterTableDataEnd.length;
      this.querry();
    },

    doFilter() {//过滤，前端完成
      if (this.tableDataName == "") {
        this.$message.warning("查询条件不能为空！");
        this.tableDataName = "";
        return;
      }
      console.log(this.tableDataBegin);
      this.tableDataEnd = [];

      this.filterTableDataEnd = [];
      this.tableDataBegin.forEach((value) => {
        if (value.userName) {
          if (value.userName.indexOf(this.tableDataName) >= 0) {
            console.log(value.userName);
            this.filterTableDataEnd.push(value);
          }
        }
      });

      this.tableDataName = "";
      this.currentPage = 1;
      this.totalItems = this.filterTableDataEnd.length;
      //渲染表格,根据值
      this.currentChangePage(this.filterTableDataEnd);

      this.flag = true;
    },

    //每页展示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      //需要判断是否检索
      if (!this.flag) {
        this.currentChangePage(this.tableDataBegin);
        console.log(this.tableDataEnd);
      } else {
        this.currentChangePage(this.filterTableDataEnd);
        console.log(this.tableDataEnd);
      }
    }, //组件自带监控当前页码

    //点击下一页
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pageSize;
      let to = this.currentPage * this.pageSize;
      this.tableDataEnd = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from]);
        }
      }
    },
  },
};
</script>

<style  scoped>
.manage-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.manage-header .addUser {
  height: 40px;
}
</style>>
